<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的作品</title>
    <header th:replace="header::html"></header>
    <script type="text/javascript" th:src="@{/sj/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/sj/layui/layui.js}"></script>
</head>
<body>

<button type="button" class="layui-btn" id="upload">
    <i class="layui-icon">&#xe67c;</i>发布作品
</button>
<input type="button" class="layui-btn layui-btn-danger layui-btn-xs" value="返回主页" onclick="back()">

<table id="demo" lay-filter="test"></table>

<script id="up" type="text/html">
    <form id="f" method="post">
        <div class="layui-form-item" >
            <div class="layui-input-inline">
                作品标题:<input type="text" name="wname"  id="wname" required  lay-verify="required" placeholder="请输入作品标题" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                作品描述:<input type="text" name="wtext"  id="wtext" required  lay-verify="required" placeholder="请输入作品描述" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                作品价格:<input type="text" name="wmoney"  id="wmoney" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <button class="layui-btn layui-btn-normal" type="button" id="r">选择文件</button>
        <button type="button" class="layui-btn layui-btn-normal" id="y">确认上传</button><br><span id="sp">选择文件</span>
    </form>
</script>



<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="no">下架作品</a>
</script>

<script>

	function back()
	{
		window.parent.location.href="/api-front/getPage?pageName=index";
	}

	layui.use(['layer', 'jquery','upload','table'], function ()
	{
		var table = layui.table;
		var upload=layui.upload;
		table.render({
			elem: '#demo'
			,type:'POST'
			,url: '/api-front/work/getList'
			,page: true
			,limit:5
			,limits:[5]
			,id:"testReload"
			,cols: [
				[
					{field: 'wid', hide:true}
					,{field: 'wtitle', title: '作品标题', width:150}
					,{field: 'wcontent', title: '作品描述', width:150}
					,{field: 'fname', title: '作品名', width:150}
					,{field: 'wmoney', title: '作品价格', width:120}
					,{field: 'wstarttime', title: '上架时间', width:120}
					,{field: 'wreadcount', title: '浏览数', width:100}
					,{field: 'wstatus', title: '审核状态', width:100}
					,{title:'操作',width:150,toolbar:"#bar"}
				]
			]
		});


		table.on('tool(test)', function(obj)
		{
			var data = obj.data;
			var layEvent = obj.event;
			var tr = obj.tr;
            layer.confirm('确定要下架吗?', function(index)
            {
                $.ajax({
                    type:"POST",
                    url:'/api-front/work/deleteWork',
                    dataType:"text",
                    data:{wid:data.wid,fname:data.fname},
                    success:function(msg)
                    {
                        if(msg==="yes")
                        {
                            layer.alert("下架成功", {icon: 1});
                            $(".layui-laypage-btn")[0].click();
                            layer.close(index);
                        }
                        else
                        {
                            layer.alert("下架失败，请重试", {icon: 5});
                        }
                    },
                    error:function ()
                    {
                        layer.alert("服务器正忙.....", {icon: 5});
                    }
                });
            });
		});

		$("#upload").click(function ()
		{
			var flag=false;
			var str=layer.open({
				type: 1,
				content: $('#up').html(),
				area: ['500px','300px'],
				title: '发布作品',
				success:function () {
				}
			});
			$("#y").click(function ()
			{
				var wname=document.getElementById("wname").value;
				var wtext=document.getElementById("wtext").value;
				var wmoney=document.getElementById("wmoney").value;

				if(flag===false)
				{
					layer.alert("请选择您要上传的文件",{icon:5});
				}
				else if(wname.length===0 || wtext.length===0 || wmoney.length===0)
                {
	                layer.alert("请将内容填写完整",{icon:5});
                }
				else if(wname.length>10)
                {
	                layer.alert("作品名称不能超过10个字",{icon:5});
                }
				else if(wtext.length>15)
				{
					layer.alert("作品描述不能超过15个字",{icon:5});
				}
				else if(!(wmoney%1===0))
				{
					layer.alert("请输入整数费用", {icon: 5});
				}
				else if(!(wmoney>0&&wmoney<=1000))
				{
					layer.alert("请输入1-1000元的费用", {icon: 5});
				}
				else
				{
					var form = document.getElementById("f");
					var d = new FormData(form);
					$.ajax({
						type:"POST",
						url:"/api-front/work/addWork",
						dataType:"text",
						data:d,
						async : false,
						contentType: false,
						processData: false,
						success:function(msg)
						{
							if(msg==="yes")
							{
								layer.open({
									title: ['温馨提示'],
									content: '上传成功',
									btn: ['确定'],
									closeBtn :0,
									yes: function(){
										window.location.href="/api-front/getPage?pageName=frontPage/myWorks";
									}
								});
							}
							else
							{
								layer.alert('上传失败，请稍后重试', {icon: 5});
							}
						},
						error:function ()
						{
							layer.alert('服务器正忙', {icon: 5});
						}
					});
				}
			});
			upload.render({
				elem: '#r' //绑定元素
				,auto:false
				,accept: 'file'
				,multiple: true
				,choose: function(obj){
					flag=true;
					obj.preview(function(index, file, result)
					{
						var fileName=file.name;
						var sp=document.getElementById("sp");
						sp.innerText=fileName;
					});
				}
				,done: function(res){
					layer.msg("上传成功！");
				}
				,error: function(){
					layer.msg("上传失败！");
				}
			});
		});

	});
</script>

</body>
</html>